<!DOCTYPE html>
<html>
<head>
	<title>主页</title>
	<meta charset="utf-8">
	<meta content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
	      name="viewport"/>
	<link href="https://cdn.bootcss.com/element-ui/2.12.0/theme-chalk/index.css" rel="stylesheet">
	<style type="text/css">
		* {
			padding: 0;
			margin: 0;
		}

		body {
			background-color: #EEE;
		}

		.app {
			font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
		}

		.content-box {
			margin: 1em;
			padding: 1em;
			background-color: #FFF;
			color: #666;
		}

		.el-tag {
			border-radius: 1px;
		}

		/*800之下*/
		@media (max-width: 800px) {
			.kapian {
				width: 100% !important;
				margin-right: 0px !important;
			}

			.saoma {
				display: none;
			}
		}
	</style>
</head>
<body>

<div class="app">


	<div class="content-box">

		<div class="kapian" style="width: 35%; float: left; margin-right: 4%;">
			<el-divider content-position="left">
				<big><big>DDVUDO</big></big>
			</el-divider>
			<div style="font-size: 0.9em; line-height: 1.6em;">
				<br>
				<ul style="padding-left: 1em; line-height: 1.5em;">
					<li>
						<b>GitHub地址：</b>
						<el-link href="https://github.com/ddv12138/Java-Web-WebSite-Practice" target="_blank"
						         type="primary">
							https://github.com/ddv12138/Java-Web-WebSite-Practice
						</el-link>
					</li>
				</ul>
				<ul style="padding-left: 1em; line-height: 1.5em;">
					<li>
						<b>前端的部分参考项目</b>
						<el-link href="https://github.com/click33/sa-admin" target="_blank" type="primary">
							https://github.com/click33/sa-admin
						</el-link>
					</li>
				</ul>
			</div>
		</div>
		<div class="kapian" style="width: 35%; float: left;">
			<el-divider content-position="left">
				<big><big>技术选型</big></big>
			</el-divider>
			<ul style="padding-left: 1em; line-height: 1.5em;">
				<li>
					<el-link href="https://cn.vuejs.org/" target="_blank" type="primary">JS引擎：Vue @2.6.10</el-link>
				</li>
				<li>
					<el-link href="https://element.eleme.cn/#/zh-CN" target="_blank" type="primary">UI框架：Element-UI
						@2.8.2
					</el-link>
				</li>
				<li>
					<el-link href="http://layer.layui.com/" target="_blank" type="primary">web弹层：layer @3.1.1</el-link>
				</li>
				<li>
					<el-link href="https://www.swiper.com.cn/" target="_blank" type="primary">切页动画：Swiper @4.5.0
					</el-link>
				</li>
				<li>
					<el-link href="https://echarts.baidu.com/" target="_blank" type="primary">图表引擎：ECharts @4.2.1
					</el-link>
				</li>
				<li>
					<el-link href="http://www.wangeditor.com/" target="_blank" type="primary">富文本编辑器：wangEditor @3.1.1
					</el-link>
				</li>
			</ul>
		</div>
		<div style="clear: both;"></div>
	</div>


	<div class="content-box">
		<div class="kapian" style="font-size: 0.9em; line-height: 1.6em; width: 30%; float: left; margin-right: 5%;">
			<el-divider content-position="left">
				<big><big>功能介绍</big></big>
			</el-divider>
			<ul style="padding-left: 1em; line-height: 1.5em;">

				<li>
					架构：基于iframe，无后台代码，纯html模板，可以方便的适配任何后端语言
				</li>
				<li>
					折叠： 折叠或收缩菜单，并且监听窗口大小变化，在拉伸窗口时自动折叠或收缩菜单，自动响应式
				</li>
				<li>
					卡片： 多卡片堆积，与菜单双向关联，在卡片标签右击可以：刷新、关闭、关闭其它、关闭所有、悬浮打开、新窗口打开。
				</li>
				<li>
					切换： 滑动、淡入、方块、3D流、3D翻转、、五种高大上切换动画，任你选择！
				</li>
				<li>
					主题：目前保留四种主题：深蓝、墨绿、银灰、黑绿结合（切换主题时，可自动保存你的喜好，下次打开时仍然有效）
				</li>
				<li>
					保留： 切换卡片时，可自动保留上个卡片的滚动条高度（目前没有见到其它任何一个模板做到这一点，或者说没有任何一个模板注意到这个细节功能点）
				</li>
			</ul>
		</div>
		<div class="kapian" style="font-size: 0.9em; line-height: 1.6em; width: 60%; float: left;">
			<!--			<el-divider content-position="left">-->
			<!--				<big><big>疑问：</big></big>-->
			<!--			</el-divider>-->

			<!--			<h4>vue、element-ui、layer我都没用过，可以用这个模板吗？</h4>-->
			<!--			<p style="margin-top: 5px;">-->
			<!--				首先你要明白，模板分为两部分（index.html框架与框架内的模板页）<br>-->
			<!--				如果你只使用index.html框架部分，可以不必掌握vue等技术，使用时甚至你都不用改动源码，-->
			<!--				只重写几个属性函数就可以集成到你的项目中，<br>-->
			<!--				如果你要使用框架内的模板页，则需要对vue等框架有一定的了解-->
			<!--			</p>-->

			<!--			<br>-->
			<!--			<h4>为什么是iframe，而不是SPA？</h4>-->
			<!--			<p style="margin-top: 5px;">-->
			<!--				现在前端开发比较主流的三种方式：服务器渲染、前后端分离、SPA<br>-->
			<!--				+ 服务器渲染：类似于jsp、asp、php等所有借助后端语言渲染视图的技术，这也是比较传统的一种方式 <br>-->
			<!--				+ 前后端分离：脱离后端语言，只写html，就像是在写一个静态站，与服务器的交互全部走ajax<br>-->
			<!--				+ SPA：在前后端分离的基础上更进一步，借助gulp、webpack等构件工具将项目打包成单页应用的一种方式 <br>-->
			<!--				<b>本模板</b> 正是采用的第2种方式（so：本模板可能无法满足重度SPA患者）<br>-->
			<!--				1、前后端分离，让我们脱离了后端语言的@include指令，不用为了代码的模块化再到处搜索xx技术如何热更新代码 <br>-->
			<!--				2、不使用webpack、gulp等构建工具也可以写代码，不必再费尽心机搭建一个代码编译环境 <br>-->
			<!--				3、网站头部底部等公共部分代码的复用是我们使用构建工具的主要目的，但是我们借助iframe标签，轻松巧妙的化解了这个难题，借助iframe，-->
			<!--				让网站成为一个真正意义上的多窗口应用-->
			<!--				（大多数服务器渲染方式每次切换窗口会造成窗口刷新，SPA将代码都塞到了一个页面中的方式使得我们写代码时变得瞻前顾后） <br>-->
			<!--				4、返璞归真，像写静态站一样来写后台，一个html编辑器就可以强Lu所有代码，尝试一下，相信我，你会爱上这种开发模式的-->
			<!--				<br>-->
			<!--			</p>-->
			<a href="https://m.maploco.com/details/0a75z4up"><img alt="Locations of Site Visitors"
			                                                      src="https://www.maploco.com/vmap/10037329.png"
			                                                      style="border:0px;"
			                                                      title="Locations of Site Visitors"/></a>
		</div>
		<div style="clear: both;">
		</div>
	</div>
	<br><br>
</div>

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>

<script type="text/javascript">
    Vue.config.productionTip = false;
</script>
<script src="https://cdn.bootcss.com/element-ui/2.12.0/index.js"></script>
<script type="text/javascript">
    new Vue({
        el: '.app',
        data: {},
        methods: {
            // 没了
            meile: function () {
                this.$message({
                    message: '没了还点',
                    type: 'warning'
                });
            },
            // 显示文档页面
            openDoc: function () {
                // parent.sp.selectMenu(11);
            }

        }
    })
</script>


</body>
</html>
